//当表单发生提交行为
$('#userForm').on('submit',function(){
    var formData = $(this).serialize();
    $.ajax({
        type:'post',
        url:'/users',
        data:formData,
        success:function(){
            location.reload();
        },
        error:function(){
            alert('创建用户失败');
        }
    })
    return false;
});
//通过事件委托上传头像
$('#modifyBox').on('change','#avatar',function(){
    var formData = new FormData();
    formData.append('avatar',this.files[0]);
    $.ajax({
        type:'post',
        url:'/upload',
        data:formData,
        // 告诉$.ajax方法不要解析请求参数
        processData:false,
        // 告诉$.ajax方法不要设置请求参数类型
        contentType:false,
        success:function(response){
            $('#preview').attr('src',response[0].avatar);
            $('#hiddenAvatar').val(response[0].avatar);
        }
    });
})

//向服务器发送请求，索要用户列表数据
$.ajax({
    type:'get',
    url:'/users',
    success:function(response){
        var html=template('userTpl',{data:response});
        $('#userBox').html(html);
    }
});

//通过事件委托的方式为编辑按钮添加点击事件
$('#userBox').on('click','.edit',function(){
    var id = $(this).attr('data-id');
    $.ajax({
        type:'get',
        url:'/users/'+id,
        success:function(response){
            var html = template('modifyTpl',response);
            $('#modifyBox').html(html);
        }
    });
})

//为修改表单添加表单提交事件
$('#modifyBox').on('submit','#modifyForm',function(){
    var formData = $(this).serialize();
    var id = $(this).attr('data-id');
    $.ajax({
        type:'put',
        url:'/users/'+id,
        data:formData,
        success:function(response){
            location.reload();
        }
    });
    return false;
})

//使用事件委托实现用户删除
$('#userBox').on('click','.delete',function(){
    var id = $(this).attr('data-id');
    var isConfirm = confirm('您真的要删除吗？');
    if(isConfirm){
        $.ajax({
            type:'delete',
            url:'/users/'+id,
            success:function(){
                location.reload();
            }
        });
    }
})

//当全选按钮发生状态时，副选按钮随之变换
var selectAll = $('#selectAll');
var deleteMany = $('#deleteMany')
selectAll.on('change',function(){
    var status = $(this).prop('checked');
    if(status){
        deleteMany.show();
    }else{
        deleteMany.hide();
    }
    $('#userBox').find('input').prop('checked',status);
});

$('#userBox').on('change','.userStatus',function(){
    var inputs = $('#userBox').find('input');
    if(inputs.filter(':checked').length==inputs.length){
        selectAll.prop('checked',true);
    }else{
        selectAll.prop('checked',false);
    }
    if(inputs.filter(':checked').length>0){
        deleteMany.show();
    }else{
        deleteMany.hide();
    }
})

//批量删除用户
deleteMany.on('click',function(){
    var ids=[];
    var checkedUser = $('#userBox').find('input').filter(':checked');
    checkedUser.each(function(index,element){
        ids.push($(element).attr('data-id'));
    });
    if(confirm('确认要删除吗？')){
        $.ajax({
            type:'delete',
            url:'/users/'+ids.join('-'),
            success:function(){
                location.reload();
            }
        })
    }
})
